<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网址列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="css/weuix.min.css"/>
    <script src="js/zepto.min.js"></script>
</head>
<body ontouchstart style="background-color: #f8f8f8;">
<div class="weui_cells_title">左滑动删除网址</div>

<div class="weui_cells" id="url-list-div">
    <div class="weui_cell slidelefts" v-for="url in urls">
        <div class="weui_cell_hd" style="padding-left:15px">{{url.name}} </div>
        <div class="weui_cell_bd weui_cell_primary"  style="padding-left:0">
            <p>{{url.url}}</p>
        </div>
        <div class="slideleft" v-on:click="deleteUrl(url.id)">
            <span class="bg-red f-white">删除</span>
        </div>
    </div>

</div>

<script src="js/vue.min.js"></script>
<script src="js/slideleft.js"></script>
<script src="js/common-20180604.js"></script>
<script>
    // new VConsole();

    checkUserid();

    $(function(){
        var vm = new Vue({
            el: '#url-list-div',
            data: {
                urls: []
            },
            methods: {
                deleteUrl: function (id) {
                    console.log(id);
                    $.ajax({
                        url: "/url/" + id,
                        type: "delete",
                        dataType: "json",
                        success: function (data) {
                            if (data.errCode == 0){
                                $.toast("删除成功");
                                window.location.reload();
                            } else {
                                $.toptips(data.errMsg);
                            }
                        },
                        error: function () {
                            $.toptips("删除失败");
                        }
                    });
                }
            }
        })

        $.ajax({
            url: "/url?userid=" + localStorage.getItem("userid"),
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                vm.urls=data.result;
            }
        });

    });

</script>

</body>
</html>